<template>

	<main class="zj gridPanel">
		<div class="chartBox">
			<h2>安监探测器趋势分析</h2>
			<div class="chart" ref="chart1"></div>
		</div>
		<div class="chartBox w2">
			<h2>安监探测器占比</h2>
			<div class="chart" ref="chart2"></div>
		</div>
		<div class="chartBox w2">
			<h2>安监探测器数量</h2>
			<div class="chart" ref="chart3"></div>
		</div>
	</main>


</template>

<script>

	export default {
		data() {
			return {
				data1: [
					{year: 2013, name: '加气/油站', value:0},
					{year: 2013, name: '化工厂', value: 0},

					{year: 2014, name: '加气/油站', value: 0},
					{year: 2014, name: '化工厂', value: 0},

					{year: 2015, name: '加气/油站', value: 0},
					{year: 2015, name: '化工厂', value: 0},

					{year: 2016, name: '加气/油站', value: 0},
					{year: 2016, name: '化工厂', value: 0},

					{year: 2017, name: '加气/油站', value: 0},
					{year: 2017, name: '化工厂', value: 0},

					{year: 2018, name: '加气/油站', value: 0},
					{year: 2018, name: '化工厂', value: 0},

					{year: 2019, name: '加气/油站', value: 0},
					{year: 2019, name: '化工厂', value: 0},

					{year: 2020, name: '加气/油站', value: 0},
					{year: 2020, name: '化工厂', value: 0},
				],
				data2: [
					{name: '加气站', value: 0},
					{name: '加油站', value: 0},
					{name: '造纸厂', value: 0},
					{name: '发电厂', value: 0},
					{name: '化肥加工厂', value: 0},
				]
			}
		},
		mounted() {
			this.render_chart1()
			this.render_chart2()
			this.render_chart3()
		},
		methods: {
			render_chart1() {
				const line = new this.$g2plot.Line(this.$refs.chart1, {
					data: this.data1,
					xField: 'year',
					yField: 'value',
					seriesField: 'name',
					label: true,
					point: {
						size: 5,
					},
				});
				line.render();
			},
			render_chart2() {
				const piePlot = new this.$g2plot.Pie(this.$refs.chart2, {
					data: this.data2,
					angleField: 'value',
					colorField: 'name',
					radius: 0.8,
					innerRadius: 0.64,
					legend: false,
					label: {
						type: 'outer',
						content: '{name}',
					},
					statistic: {
						title: {
							offsetY: -10,
						},
						content: {
							offsetY: 10,
						},
					},
				});

				piePlot.render();

			},
			render_chart3() {
				const columnPlot = new this.$g2plot.Column(this.$refs.chart3, {
					data: this.data2,
					xField: 'name',
					yField: 'value',
					label: {
						position: 'top', // 'top', 'bottom', 'middle',
					},
					columnWidthRatio: .3,
				});

				columnPlot.render();

			},

		}
	}
</script>